<template>
	<view>
		<uni-forms ref="formRef" :rules="rules" :label-width="100" v-model="form">
			<!-- 当前密码 -->
			<uni-forms-item required label="当前密码" name="password">
				<uni-easyinput v-model="form.password" placeholder="请输入当前密码" class="password-input" />
			</uni-forms-item>

			<!-- 新密码 -->
			<uni-forms-item required label="新密码" name="newpassword">
				<uni-easyinput type="password" v-model="form.newpassword" placeholder="8 - 20字符，大小写字母、数字、符号"
					class="password-input" />
			</uni-forms-item>

			<!-- 确认密码 -->
			<uni-forms-item required label="确认密码" name="repassword">
				<uni-easyinput type="password" v-model="form.repassword" placeholder="请输入确认密码" class="password-input" />
			</uni-forms-item>
		</uni-forms>
		<button class="btn" @click="reg">保存</button>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	const form = ref({})
	const formRef = ref()
	const rules = ref({
		password: {
			rules: [{
					required: true,
					errorMessage: '密码输入有误'
				},
				{
					minLength: 8,
					maxLength: 20,
					errorMessage: '密码长度在{minLength}-{maxLength}之间'
				},
				{
					pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w])[^\s]{8,20}$/,
					errorMessage: '密码必须包含大小写字母、数字和符号'
				},
				{
					validateFunction: async (rule, value, callback) => {
						// console.log(this.checkValidator('password')); // 检查 password 字段是否有 validator
						// console.log("mioma===" + form.value.password);
						const userId = JSON.parse(uni.getStorageSync('id'));
						console.log(userId[0].id)
						const id = userId[0].id
						const result = await uni.request({
							url: 'http://localhost:8080/pwd/validPassword',
							method: 'GET',
							data: {
								id: id,
								pwd: form.value.password,
								newpassword: form.value.newpassword
							}
						});
						if (result.data.code === 1001) {
							uni.reLaunch({ url: '/pages/account/settings' })
						} else if (result.data.code === 1002) {
							return callback('密码不正确')
						}
					}
				}
			]
		},
		newpassword: {
			rules: [{
					required: true,
					errorMessage: '8-20字符,大小写字母、数字和符号'
				},
				{
					minLength: 8,
					maxLength: 20,
					errorMessage: '密码长度应在{minLength}到{maxLength}个字符之间'
				},
				{
					pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w])[^\s]{8,20}$/,
					errorMessage: '密码必须包含大小写字母、数字和符号'
				}
			]
		},
		repassword: {
			rules: [{
					required: true,
					errorMessage: '请输入确认密码'
				},
				{
					validateFunction: (rule, value, data, callback) => {
						if (value !== data.newpassword) {
							callback(new Error('两次输入的密码不一致'));
						} else {
							callback();
						}
					}
				}
			]
		}
	})

	const reg = () => {
		formRef.value.validate()
			.then(res => {
				console.log('验证通过', res);
				// uni.showLoading({
				// 	title: '正在提交...'
				// });
				const userId = JSON.parse(uni.getStorageSync('id'));
				const id = userId[0].id
				//提交表单
				uni.request({
					url: 'http://localhost:8080/pwd/update',
					method: 'GET',
					data: {
						id: id,
						newpassword: value
					},
					success: res => {
						if (res.data.code === 1001) {
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.data.msg || '保存失败，请稍后再试',
								icon: 'none'
							});
						}
					},
				});
			})
	}
</script>

<style>
	.btn {
		background-color: mediumseagreen;
	}
</style>